<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./src/app.js" type="module"></script>
    <style>
        tr {
            width: 800px;
            height: 50px;
            /* display: flex;
            justify-content: space-between; */
            /* margin-left: 500px; */
            background-color: #ff8273;
        }

        tr td {
            text-align: center;
            line-height: 50px;
            color: #ffebe9;
        }

        .current {
            color: white;
            border-bottom: 5px solid white;
        }
    </style>
</head>

<body>
    <!-- <h1 class="list">ccccccc</h1> -->
    <tr class="tr">

    </tr>
    <h1 class="box">1111</h1>
    <!-- <td class="o">123123</td> -->

</body>
<script type="module"></script>
<script src="./jquery-1.11.1.js"></script>
<script>
    load()
    function load() {
        $.ajax({
            type: 'get',
            url: 'https://api.aslegou.top/api/getcate',
            data: {

            },
            success: function (item) {
                console.log(item);
                var arr = item.list
                arr.forEach(function (val, i, array) {
                    $('body').append(`
                    <tr>
                        <td class="o">${val.catename}</td>
                    </tr>
                    `)
                })
            }
        })
    }
    $('body').on('click', 'td', function () {
        // 点击谁给谁添加类名  去掉其他导航的类名
        $(this).addClass("current").siblings("tr .o").removeClass("current")
    })
</script>

</html>